<template>
	<view class="page_box">
		<u-navbar :is-back="true" title="身份申请" v-if="1" :border-bottom="false"></u-navbar>

		<view class="content_box ">
			<view class="content-item flex justify-between align-center margin-bottom-lg">
				<view>当前身份：</view>
				<view class="f30 text-bold">BT推广用户</view>
			</view>
			<view class="content-item content-border">
				<view class="ident-content flex justify-between" v-if="ident_active == 1">
					<view :class="ident_active==1?'ident-item ident-active':'ident-item'" @click="ident_active = 2">
						<view class="title f34">BF服务用户</view>
						<view class="tipc f24">成为服务用户可入驻平台赚取推广费用</view>
						<u-icon name="checkbox-mark" color="#FFFFFF" size="28" class="checkbox-posi"></u-icon>
					</view>
				</view>
				<view class="ident-content flex justify-between" v-else>
					<view :class="ident_active==2?'ident-item ident-active':'ident-item'" @click="ident_active = 2">
						<view class="title f34">BT推广用户</view>
						<view class="tipc f24">成为推广用户即可成为推广者赚取推广费用</view>
						<u-icon name="checkbox-mark" color="#FFFFFF" size="28" class="checkbox-posi"></u-icon>
					</view>
				</view>
				<view class="ident-tipc flex align-center">
					<u-icon name="error-circle" color="#999999" size="28"></u-icon>
					<text>成为推广用户或服务用户需要认缴3650或实缴6500</text>
				</view>
			</view>
			<view class="content-item">
				<u-radio-group
					v-model="radioValue" 
					@change="radioGroupChange"
					label-size="30"
					active-color="#FFB81E"
					wrap="true"
				>
					<u-radio name="0">认缴</u-radio>
					<view class="radio-tipc">本次不产生扣费，当您在平台赚取佣金后，平台将从您的收益里扣取6500积分。</view>
					<u-radio name="1">实缴</u-radio>
					<view class="radio-tipc">本次扣费后，为实际支付3650元/年。</view>
				</u-radio-group>
				<button class="circle-btn" @click="determine()">申请</button>
				<view class="flex align-center justify-center margin-top-sm">
					<u-checkbox
						active-color="#F5AA15"
						shape="circle"
						label-size="22"
						size='26'
						@change="checkboxChange" 
						v-model="ident_mode"
						name="rule_name"
					>我已阅读并同意</u-checkbox>
					<navigator hover-class="none" class="text-yellow f22">《身份规则》</navigator>
				</view>	
			</view>
		


		</view>

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	
	</view>
</template>

<script>
export default {
	data() {
		return {
			ident_active:'',
			ident_mode:true,
			radioValue:0,
		};
	},
	onShow() {
		
	},
	onLoad(option) {
		this.ident_active = option.identity
		//console.log(option)
	},
	methods: {
		radioGroupChange(e) {
			// console.log(e);
		},
	}
};
</script>

<style lang="scss" scoped>
.page_box {

}

.content_box {
	.content-item{
		.ident-content{
			.ident-item{
				background: #f5f5f5;
				border-radius: 20rpx;
				width: 100%;
				padding: 38rpx 30rpx;
				overflow: hidden;
				position: relative;
				.title{
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
				}
				.tipc{
					color: #717171;
					line-height: 50rpx;
					margin-top: 25rpx;
				}
				.checkbox-posi{
					position: absolute;
					right: 10rpx;
					top: 10rpx;
					z-index: 2;
				}
			}
			.ident-active{
				background: #ed1c2429 !important;
				border: 2rpx solid #EC7066;				
				&::after{
					position: absolute;
					content: ".";
					right: -39rpx;
					top: -14rpx;
					background-color: #EC7066;
					width: 114rpx;
					height: 64rpx;
					transform: rotate(45deg);
				}
				.title{
					color: #EC7066;
				}
				.tipc{
					color: #FF8D84 !important;
				}
			}
		}		
		.ident-tipc{
			padding: 26rpx 10rpx 26rpx;
			text{
				color: #999999;
				margin-left: 10rpx;
				font-size: 24rpx;
			}
		}
		.popup-tipc{
			margin-bottom: 70rpx;
			color: #999999;
			margin-top: 40rpx;
			text{
				padding: 4rpx 0;
				display: block;
			}
		}
		.radio-tipc{
			color: #717171;
			font-size: 26rpx;
			margin-left: 40rpx;
			line-height: 48rpx;
			margin-bottom: 60rpx;
			margin-top: 26rpx;
		}
		.circle-btn{
			margin-top: 200rpx;
			background: #4a515b;
			color: #FFFFFF;
			border-radius: 45rpx;
			font-size: 30rpx;
			font-weight: 500;
			line-height: 90rpx;
		}
	}
}
</style>
